<template>
  <!--底部标签组件-->
  <van-tabbar
    v-model="active"
    active-color="#ff8040d9"
    inactive-color="#949494"
    v-if="tabbarActive"
  >
    <van-tabbar-item name="" to="/">
      <span>首页</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use
            :xlink:href="props.active ? '#icon-shouye' : '#icon-shouye'"
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="learningCenter" to="/learningCenter">
      <span>学习中心</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active ? '#icon-learnjiqixuexi' : '#icon-learnjiqixuexi'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="information" to="/information">
      <span>资讯</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="props.active ? '#icon-zixun' : '#icon-zixun'"></use>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="examStoreroom" to="/examStoreroom">
      <span>烤题库</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active ? '#icon-ziyuanshujuku-copy' : '#icon-ziyuanshujuku'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item
      name="user"
      icon="user-o"
      to="/user"
      :badge="
        store.state.user.orderingCount > 0
          ? `${store.state.user.orderingCount}`
          : null
      "
    >
      <span>我的</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="props.active ? '#icon-wode' : '#icon-wode'"></use>
        </svg>
      </template>
    </van-tabbar-item>
  </van-tabbar>
  <router-view />
</template>
<script>
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    //标签选中值
    const active = ref("home");
    //组件状态
    const tabbarActive = ref(true);
    const route = useRoute();
    watchEffect(() => {
      //获取路由并修改标签选中值
      // console.log(route.fullPath.split("/")[1]);
      active.value = route.fullPath.split("/")[1];
      //路由跳转时---辨别是否在标签页面，控制它的显示隐藏
      if (
        active.value != "" &&
        active.value != "learningCenter" &&
        active.value != "information" &&
        active.value != "examStoreroom" &&
        active.value != "user"
      ) {
        tabbarActive.value = false;
      } else {
        tabbarActive.value = true;
      }
    });
    return { active, tabbarActive, store };
  },
};
</script>
<style>
.icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
